<template>
  <div class="box">
    <ul class="booklist">
      <li @click = "goBookLost(item)" v-for = "(item, index) of list" :key = "index">
        <div>
          <h2>{{ item.title }}</h2>
          <p>{{ item.desc }}</p>
          <span>{{ item.collectorCount }}收藏</span>
          <span>{{ item.bookCount }}本</span>
        </div>
        <img :src="decodeURIComponent(item.cover).substring(7)">
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  data () {
    return {
      list: []
    }
  },
  mounted () {
    fetch(`https://novel.juhe.im/booklists`)
      .then(res => res.json())
      .then((data) => {
        console.log(data)
        this.list = data.bookLists
      })
  },
  methods: {
    goBookLost (item) {
      console.log(item)
      this.$router.push(`/booklistdetail?id=${item._id}`)
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.booklist{
  @include overflow()
  li{
    @include flexbox();
    margin: 0.1rem 0;
    padding: 0 0.05rem;
    img{
      @include rect(40%,2rem)
    }
    div{
      padding: 0.1rem;
      @include rect(60%,auto)
      h2{
        height:0.2rem;
      }
      p{
        height: 1rem;
        overflow: hidden;
        margin: 0.05rem 0;
      }
    }
  }
}
</style>
